<template>
    <div class="wdp-7">
        <!--导航栏-->
        <bpm-nav-bar title="我的" :leftArrow="false"></bpm-nav-bar>

        <van-cell-group class="kq">
            <van-cell>
                <h3>我的考勤</h3>
            </van-cell>
            <van-cell>
                <van-row class="kq-box">
                    <van-col span="8"><span class="title-kq">8</span><br>本月出勤天数</van-col>
                    <van-col span="8">迟到：<span>2</span>次<br>满签：<span>4</span>次<br>旷工：<span>1</span>天</van-col>
                    <van-col span="8">早退：<span>2</span>次<br>外勤：<span>3</span>次<br>正常：<span>1</span>天</van-col>
                </van-row>
            </van-cell>
        </van-cell-group>

        <van-cell-group class="bx">
            <van-cell>
                <h3>本月报销</h3>
            </van-cell>

            <van-row>
                <van-col span="12">
                    <div class="bx-box">
                        <van-icon name="chat-o"/>
                        <h3>会议助手</h3>
                        <p>发起会议：3次</p>
                        <p>参与会议：1次</p></div>
                </van-col>
                <van-col span="12">
                    <div class="bx-box">
                        <van-icon name="chat-o"/>
                        <h3>费控报销</h3>
                        <p>发起会议：3次</p>
                        <p>参与会议：1次</p></div>
                </van-col>
                <van-col span="12">
                    <div class="bx-box">
                        <van-icon name="chat-o"/>
                        <h3>审批请求</h3>
                        <p>发起会议：3次</p>
                        <p>参与会议：1次</p></div>
                </van-col>
                <van-col span="12">
                    <div class="bx-box">
                        <van-icon name="chat-o"/>
                        <h3>请假出差</h3>
                        <p>发起会议：3次</p>
                        <p>参与会议：1次</p></div>
                </van-col>
                <van-col span="12">
                    <div class="bx-box">
                        <van-icon name="chat-o"/>
                        <h3>企业用车</h3>
                        <p>发起会议：3次</p>
                        <p>参与会议：1次</p></div>
                </van-col>
            </van-row>
        </van-cell-group>

        <van-collapse v-model="activeNames" class="collapse">
            <van-collapse-item title="高级设置" name="1">
                <template #icon>
                    <van-icon name="star-o" color="#ff89fa"/>
                </template>
                内容
            </van-collapse-item>
            <van-collapse-item title="功能索引" name="2" icon="shop-o">
                <template #icon>
                    <van-icon name="star-o" color="#1989fa"/>
                </template>
                内容
            </van-collapse-item>
            <van-collapse-item title="更新公告" name="3" icon="shop-o">
                <template #icon>
                    <van-icon name="star-o" color="#19ddfa"/>
                </template>
                内容
            </van-collapse-item>
            <van-collapse-item title="问题反馈" name="4" icon="shop-o">
                <template #icon>
                    <van-icon name="star-o" color="#1944fa"/>
                </template>
                内容
            </van-collapse-item>
            <van-collapse-item title="在线帮助" name="5" icon="shop-o">
                <template #icon>
                    <van-icon name="star-o" color="#vv89fa"/>
                </template>
                内容
            </van-collapse-item>
        </van-collapse>

        <div class="logout">
            <van-button type="default" @click="logout">退出登录</van-button>
        </div>
    </div>
</template>

<script>

    import bpmNavBar from '../../components/bpmNavBar';

    export default {
        name: 'myInfo',
        components: {
            bpmNavBar,
        },
        data() {
            return {
                activeNames: ['0'],
            }
        },
        methods: {
            logout() {
                this.$dialog.confirm({
                    title: '对话框',
                    message: '确认退出登录吗？',
                }).then(() => {
                    localStorage.removeItem("accessToken");
                    this.$router.push("/login");
                }).catch(() => {
                });
            },
        }
    }
</script>
